<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      script 模块 
      ① 必须是script标签包裹
      ② 局部作用域
      ③ 必须是严格模式
      ④ script type="module" 默认开启严格模式

      script 模块 
      ① 脚本化模块标签分割
      ② src文件化模块js文件分割（从不使用）

      import 导入、执行
      ① import 必须要在 type="module" 的模块中才能使用
      ② 导入执行js文件，功能上部分有点像 src
      ③  src 导入一次执行一次，import 重复导入多次，只执第一次，后续重复导入的文件会被忽略

      export 导出
      ① 只能使用在被导入的 `.js` 文件中
      ② 可以在所有"声明前"添加 export 关键字
      ③ 添加关键字的声明会被暴露给导入模块
      ④ import 可以声明"同名变量"，映射获取的模块变量

      js模块
      ① 局部作用域，内部所有的内容对外不可见，可以导入执行模块但不能看见模块内部
      ② 模块可以通过，导出机制，向外部暴露（返回）内部内容
     -->

    <script type="module">
      import "./js/m1.js"; // run
      import { username, add } from "./js/m3.js";
      console.log(username, add);
    </script>
  </body>
</html>
